<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../resource/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../../resource/css/jedate.css"/>
		<link rel="stylesheet" type="text/css" href="../../../resource/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../../../resource/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../../../../resources/layui/css/layui.css"/>
		<style>
			.pname{text-align: left;}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row mheader">
				<div class="col-xs-2 text-left"> <a href="javascript:;" onclick="location.href='../../../word.html'"><span class="iconfont icon-fanhui"></span></a> </div>
				<div class="col-xs-8"><h2>工程用料统计</h2></div>
				<div class="col-xs-2 text-right"><a href="#"><span class="iconfont icon-31sousuo sousuo"></span></a></div>
			</div>
			<div class="row">
				<dl class="statistics-list " id="list">

					

				</dl>
			</div>
			<!--搜索-->
			<div class="search-box">
				<div class="search-cover">
					<form action="" method="post">
						<div class="row">
							<div class="col-xs-4">
								<ul class="list-group list-items">
								  <li class="list-group-item list-group-lists search-active">项目名称</li>
								  <li class="list-group-item list-group-lists">开始时间</li>
								  <li class="list-group-item list-group-lists">结束时间</li>
								</ul>
							</div>
							<div class="col-xs-8">
								<div class="search-lists search-list1 search-active">
									<input type="text" class="pro pro-input pro-name" placeholder="请输入项目名称"/>
								</div>
								<div class="search-lists search-active">
									<input type="text" class="layui-input" id="test01" name="supply_Time" placeholder="请输入开始时间">
								</div>
								<div class="search-lists search-active">
									<input type="text" class="layui-input" id="test02" name="supply_Time" placeholder="请输入结束时间">
								</div>
							</div>
						</div>
						<div class="row">
							<span class="btns close-cover">取消</span>
							<input class="sub-cover btns fr" type="button" value="确定"/>
						</div>
						
					</form>
				
				</div>
			</div>
		</div>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="../../../resource/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../resource/js/jquery.jedate.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../resource/js/style.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../resources/js/template-web.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../resources/layui/layui.js"></script>

<script id="m_list" type="text/html">
	<% for(var i = 0; i < data.length; i++){ %>
		{{ if i==0 }}
			<dt><a >项目名称:{{data[i].proName}}</a>
			<p class="text-center pname">施工单位：{{data[i].compName1}}</p>
			</dt>
			<dd>
			<table class="table">
				<tr><th class="nleft">材料名称</th><th>材料规格</th><th>材料数量</th><th>材料单位</th><th>供应商</th></tr>
		{{ else }}
			{{ if data[i].proName != data[i-1].proName}}
				</table>
				</dd>
				<dt><a >项目名称:{{data[i].proName}}</a>
				<p class="text-center pname">施工单位：{{data[i].compName1}}</p>
				</dt>
				<dd>
				<table class="table">
				<tr><th class="nleft">材料名称</th><th>材料规格</th><th>材料数量</th><th>材料单位</th><th>供应商</th></tr>
			{{/if}}
		{{/if}}
		<tr><td class="nleft">{{data[i].mat_Name}}</td>
		<td>{{data[i].mat_Spec}}</td>
		<td align="center">{{data[i].fhzNum}}</td>
		<td align="center">{{data[i].mat_Bit}}</td>
		<td align="center">{{data[i].gys}}</td></tr>
	<% } %>
</script>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#test01'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#test02'
            ,type: 'datetime'
        });
    })

    var n=1;


    var formData = {
        type:'a',
        proName:$(".pro-name").val(),
        begintime: $("#test01").val(),
        endtime:$("#test02").val(),
    };

    var nloader = LoadMore({
        api: 'api/material/buildUseMaterTotal.do',
        data: formData,
        success: function (data) {
            console.log(data);
            //传入id来进行渲染
            var html = template('m_list', data);
//            document.getElementById('list').innerHTML =  + html;
            $("#list").html( $("#list").html() + html);
        }
    })

	//点击改变申请单高度
	$(document).ready(function(){
		  $(".more").click(function(){
		    $(this).siblings(".order-li").toggleClass("orderHeight");
		  });
	});
	$(".sousuo").click(function(){
		$(".search-box").slideToggle();
	})
	$(".list-group-lists").click(function(){
		var i=$(this).index();
		$(".search-lists").hide();
		$(".search-lists").eq(i).show();
		$(".list-group-lists").removeClass("search-active");
		$(this).addClass("search-active");
		$(".pros").hide();
		$(".pros").eq(i).show();

	});

//	点击取消按钮
	$(".close-cover").click(function(){
		$(".search-box").slideUp();
	});
//	点击确定按钮
	$(".sub-cover").click(function(){
//		console.log($(".pro-name").val());
//		console.log($("#test01").val());
//		console.log($("#test02").val());

		$(".search-box").slideUp();
		$('#list').html('');
        formData.proName=$('.pro').val();
        formData.begintime=$('#test01').val();
        formData.endtime = $('#test02').val();
        nloader.search();
	});
</script>










